<template>
    <div class="mytask">
        <div style="display: flex;justify-content: space-between;">
            <div>
                <el-input clearable v-model="sreach.keyword" style="width: 185px;" placeholder="输入任务名称/姓名查询" size="small" />
                <!-- @input="keywordChange" -->
                <el-select v-model="sreach.taskType" placeholder="请选择任务类型" size="small" clearable>
                    <el-option label="限时任务" value="1">
                    </el-option>
                    <el-option label="周期任务" value="2">
                    </el-option>
                </el-select>
                <el-select v-model="sreach.taskStatus" placeholder="请选择任务状态" size="small" clearable>
                    <el-option label="已延期" value="1">
                    </el-option>
                    <el-option label="即将到期" value="2">
                    </el-option>
                    <el-option label="未到期" value="3">
                    </el-option>
                    <el-option label="已暂停" value="4">
                    </el-option>
                    <el-option label="已完成" value="5">
                    </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="todoSearch">搜索</el-button>
            </div>
            <div>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addTask"
                    v-if="isLeader == 1">安排任务</el-button>
            </div>
        </div>

        <div style="margin:15px 0 15px 0;">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="我的" name="1">
                    <tasktable :tableData="tableData" :userid="userid" @selectDetail="selectDetail"
                        @editStartFlag="editStartFlag" @editDeleteFlag="editDeleteFlag"
                        @editCompletedFlag="editCompletedFlag" @performanceFlag="performanceFlag">
                    </tasktable>
                    <el-pagination style="text-align: right;margin-top: 15px;" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="pageObj.currentPage"
                        :page-sizes="[5, 10, 15, 20]" :page-size="pageObj.ps"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="关注" name="2">
                    <followtable :tableData="tableData2" @selectDetail="selectDetail" @editDeleteFlag="editDeleteFlag"
                        @editCompletedFlag="editCompletedFlag" @performanceFlag="performanceFlag"></followtable>
                    <el-pagination style="text-align: right;margin-top: 15px;" @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2" :current-page="pageObj2.currentPage"
                        :page-sizes="[5, 10, 15, 20]" :page-size="pageObj2.ps"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageObj2.total">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="共享" name="3">
                    <sharetable :tableData="tableData3" @selectDetail="selectDetail" @editStartFlag="editStartFlag"
                        @editDeleteFlag="editDeleteFlag" @editCompletedFlag="editCompletedFlag"
                        @performanceFlag="performanceFlag">
                    </sharetable>
                    <el-pagination style="text-align: right;margin-top: 15px;" @size-change="handleSizeChange3"
                        @current-change="handleCurrentChange3" :current-page="pageObj3.currentPage"
                        :page-sizes="[5, 10, 15, 20]" :page-size="pageObj3.ps"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageObj3.total">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>

        <taskDialog :dialogForm="dialogForm1" :taskId="taskId" @cancel="cancel" @submitTask="submitTask"></taskDialog>

        <performanceLog :dialogForm="dialogForm2" :id="id" @cancel="cancel"></performanceLog>

    </div>
</template>
<script>
import tasktable from "./components/taskTable.vue"
import followtable from "./components/followtable.vue"
import sharetable from "./components/sharetable.vue"
import taskDialog from "./components/taskDialog.vue"
import performanceLog from "./components/performanceLog.vue"
import { getPageList, stopOrDeleteTaskInfo, completeTaskInfo } from "../../../service/taskApi"
export default {
    components: { tasktable, followtable, sharetable, taskDialog, performanceLog },
    data() {
        return {
            sreach: {
                keyword: "",
                taskType: "",
                taskStatus: ""
            },
            options: [],
            activeName: '1',
            dialogForm1: {
                dialogVisible: false,
                title: '',
                width: '40%'
            },
            dialogForm2: {
                dialogVisible: false,
                title: '',
                width: '25%'
            },
            pageObj: {
                pn: 1,
                ps: 10,
                total: 0,
                currentPage: 1,

            },
            pageObj2: {
                pn: 1,
                ps: 10,
                total: 0,
                currentPage: 1,
            },
            pageObj3: {
                pn: 1,
                ps: 10,
                total: 0,
                currentPage: 1,
            },
            tableData: [],
            tableData2: [],
            tableData3: [],
            taskId: '',
            id: '',
            userid: '',
            isLeader: '',
        }
    },
    created() {
        this.getTableData();
        let userInfo = sessionStorage.getItem("userInfo");
        this.userid = JSON.parse(userInfo).id;
        this.isLeader = JSON.parse(userInfo).isLeader;
    },
    methods: {
        editCompletedFlag(val) {
            this.$confirm(`任务是否已完成?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                completeTaskInfo({ id: val, confirmState: 1 }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `已完成`
                        });
                        this.getTableData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        editStartFlag(val) {
            let text
            let flag
            if (val.flag == 1) {
                text = '开启'
                flag = 0
            } else {
                text = '暂停'
                flag = 1
            }
            this.$confirm(`是否${text}此任务?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                stopOrDeleteTaskInfo({ id: val.id, startFlag: flag }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `已${text}`
                        });
                        this.getTableData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        editDeleteFlag(val) {
            this.$confirm(`是否删除此任务?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                stopOrDeleteTaskInfo({ id: val.id, deleteFlag: 1 }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: `删除成功`
                        });
                        this.getTableData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        todoSearch() {
            this.pageObj.pn = 1;
            this.pageObj2.pn = 1;
            this.pageObj3.pn = 1;
            this.getTableData()
        },
        handleClick() {
            this.getTableData()
        },
        addTask() {
            this.taskId = ""
            this.dialogForm1.title = '安排任务'
            this.dialogForm1.dialogVisible = !this.dialogForm1.dialogVisible
        },
        selectDetail(id) {
            this.taskId = id
            this.dialogForm1.title = '任务详情'
            this.dialogForm1.dialogVisible = !this.dialogForm1.dialogVisible
        },
        performanceFlag(taskId) {
            this.id = taskId
            this.dialogForm2.title = '完成详情'
            this.dialogForm2.dialogVisible = !this.dialogForm2.dialogVisible
        },
        cancel() {
            this.taskId = ''
            this.dialogForm1.dialogVisible = !this.dialogForm1.dialogVisible
        },
        //安排任务回调
        submitTask() {
            this.dialogForm1.dialogVisible = !this.dialogForm1.dialogVisible
            this.getTableData()
        },
        //获取表格数据
        getTableData() {
            let data = {}
            let userInfo = sessionStorage.getItem("userInfo");
            let id = JSON.parse(userInfo).id;
            if (this.activeName == '1') {
                data = {
                    pn: this.pageObj.pn,
                    ps: this.pageObj.ps,
                    category: this.sreach.taskType,
                    state: this.sreach.taskStatus,
                    keyword: this.sreach.keyword,
                }
                getPageList(data).then(res => {
                    if (res.code == 0) {
                        console.log(res);
                        this.tableData = res.data.records
                        this.pageObj.pn = res.data.current
                        this.pageObj.ps = res.data.size
                        this.pageObj.total = res.data.total
                        this.pageObj.currentPage = res.data.current
                    }
                })
            } else if (this.activeName == '2') {
                data = {
                    pn: this.pageObj2.pn,
                    ps: this.pageObj2.ps,
                    category: this.sreach.taskType,
                    state: this.sreach.taskStatus,
                    keyword: this.sreach.keyword,
                    follow: id
                }
                getPageList(data).then(res => {
                    if (res.code == 0) {
                        this.tableData2 = res.data.records
                        this.pageObj2.pn = res.data.current
                        this.pageObj2.ps = res.data.size
                        this.pageObj2.total = res.data.total
                        this.pageObj2.currentPage = res.data.current
                    }
                })
            } else {
                data = {
                    pn: this.pageObj3.pn,
                    ps: this.pageObj3.ps,
                    category: this.sreach.taskType,
                    state: this.sreach.taskStatus,
                    keyword: this.sreach.keyword,
                    share: id
                }
                getPageList(data).then(res => {
                    if (res.code == 0) {
                        this.tableData3 = res.data.records
                        this.pageObj3.pn = res.data.current
                        this.pageObj3.ps = res.data.size
                        this.pageObj3.total = res.data.total
                        this.pageObj3.currentPage = res.data.current
                    }
                })
            }
        },

        handleSizeChange(val) {
            if (this.pageObj.total - this.pageObj.ps * this.pageObj.pn < val && this.pageObj.pn > 1) {
                this.pageObj.pn = this.pageObj.pn - 1
            }
            this.pageObj.ps = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            this.pageObj.pn = val
            this.getTableData()
        },
        handleSizeChange2(val) {
            if (this.pageObj2.total - this.pageObj2.ps * this.pageObj2.pn < val && this.pageObj2.pn > 1) {
                this.pageObj2.pn = this.pageObj2.pn - 1
            }
            this.pageObj2.ps = val
            this.getTableData()
        },
        handleCurrentChange2(val) {
            this.pageObj2.pn = val
            this.getTableData()
        },
        handleSizeChange3(val) {
            if (this.pageObj3.total - this.pageObj3.ps * this.pageObj3.pn < val && this.pageObj3.pn > 1) {
                this.pageObj3.pn = this.pageObj3.pn - 1
            }
            this.pageObj3.ps = val
            this.getTableData()
        },
        handleCurrentChange3(val) {
            this.pageObj3.pn = val
            this.getTableData()
        },
        // keywordChange(val) {
        //     this.getTableData()
        // }
    },
}
</script>
<style></style>